<!-- src/components/ValidatedForm.vue -->
<template>
  <form @submit.prevent="handleSubmit" class="validated-form">
    <div class="form-group">
      <label>用户名 *</label>
      <input
        v-model="formData.username"
        type="text"
        @blur="() => validateField('username', formData.username)"
        placeholder="3-10个字符"
      />
      <span v-if="errors.username" class="error">{{ errors.username }}</span>
    </div>

    <div class="form-group">
      <label>邮箱 *</label>
      <input
        v-model="formData.email"
        type="email"
        @blur="() => validateField('email', formData.email)"
        placeholder="example@example.com"
      />
      <span v-if="errors.email" class="error">{{ errors.email }}</span>
    </div>

    <div class="form-group">
      <label>密码 *</label>
      <input
        v-model="formData.password"
        type="password"
        @blur="() => validateField('password', formData.password)"
        placeholder="至少6位"
      />
      <span v-if="errors.password" class="error">{{ errors.password }}</span>
    </div>

    <div class="form-group">
      <label>确认密码 *</label>
      <input
        v-model="formData.confirmPassword"
        type="password"
        @blur="() => validateField('confirmPassword', formData.confirmPassword)"
        placeholder="请再次输入密码"
      />
      <span v-if="errors.confirmPassword" class="error">{{ errors.confirmPassword }}</span>
    </div>

    <button type="submit" :disabled="hasErrors">提交</button>
    <button type="button" @click="reset" class="reset-btn">重置</button>
  </form>
</template>

<script setup>
import { useValidation } from '@/composables/useValidation.js'

// 定义验证规则
const rules = {
  username: (value) => {
    if (!value) return '用户名不能为空'
    if (value.length < 3) return '用户名至少3个字符'
    if (value.length > 10) return '用户名不能超过10个字符'
    return ''
  },
  email: (value) => {
    if (!value) return '邮箱不能为空'
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(value)) return '请输入有效的邮箱地址'
    return ''
  },
  password: (value) => {
    if (!value) return '密码不能为空'
    if (value.length < 6) return '密码至少6位'
    return ''
  },
  confirmPassword: (value, formData) => {
    if (!value) return '请确认密码'
    if (value !== formData.password) return '两次密码不一致'
    return ''
  },
}

// 使用组合式函数
const { formData, errors, validate, reset, validateField, hasErrors } = useValidation(rules, {
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
})

// 提交处理
const handleSubmit = () => {
  if (validate()) {
    alert('表单验证通过！\n数据：\n' + JSON.stringify(formData, null, 2))
    // 这里可以调用 API 提交
  }
}
</script>

<style scoped>
.validated-form {
  max-width: 500px;
  margin: 0 auto;
}
.form-group {
  margin-bottom: 16px;
}
label {
  display: block;
  margin-bottom: 4px;
  font-weight: bold;
}
input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.error {
  color: #e53e3e;
  font-size: 14px;
  margin-top: 4px;
  display: block;
}
button {
  margin-right: 12px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #42b883;
  color: white;
  cursor: pointer;
}
button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
.reset-btn {
  background-color: #6c757d;
}
</style>
